<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="icon" href="../../favicon.ico"> -->

    <title>就业信息平台</title>

    <!-- Bootstrap core CSS -->
    <link href="./libs/bootstarp/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <!-- <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> -->

    <!-- Custom styles for this template -->
    <link href="./css/index.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- <script src="../../assets/js/ie-emulation-modes-warning.js"></script> -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- <script src="./libs//template/template-web.js"></script> -->
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <zdy-nav title="就业信息平台" :nav-list="navList"></zdy-nav>

        <div class="container zdy-container ">
            <div style="width:100%;padding: 80px 0 0;">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="./img/1.jpg" style="width:100%;height:300px;">
                        </div>
                        <div class="item">
                            <img src="./img/2.jpg" style="width:100%;height:300px;">
                        </div>
                        <div class="item">
                            <img src="./img/3.jpg" style="width:100%;height:300px;">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

            <div class="row zdy-main">

                <div class="col-sm-7 blog-main">

                    <div class="blog-post">
                        <div class="row">
                            <div class="col-md-6">
                                <h4 class="blog-post-title">就业动态</h4>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="输入搜索内容" v-model="param.title">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button"
                                            @click="handleOnClickSearch">搜索</button>
                                    </span>
                                </div><!-- /input-group -->
                            </div>
                        </div>
                        <div class="list-group">
                            <div class="lit-group-item zdy-group-item" v-for="item in jobs"
                                @click="handleOnClickJob(item)">
                                <div class="header">
                                    <p class="title">{{item.title}}</p>
                                    <p>{{item.compName}}</p>
                                </div>
                                <div class="desc">
                                    <span>{{item.createTime}}</span>
                                    <span>{{item.address}}</span>
                                    <span>{{item.degree}}</span>
                                    <span>{{item.benefits}}</span>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.blog-post -->

                    <zdy-page :total="jobSize" @num="handleOnChangeJob"></zdy-page>

                </div><!-- /.blog-main -->

                <div class="col-sm-4 col-sm-offset-1 blog-sidebar">
                    <div class="sidebar-module">
                        <h4>政策法规</h4>
                        <ul class="list-group">
                            <li class="list-group-item" v-for="item in list" @click="handleOnClick(item)">
                                <a href="javascript:void(0)">{{item.title}}</a>
                            </li>
                        </ul>
                    </div>
                </div><!-- /.blog-sidebar -->

            </div><!-- /.row -->

        </div><!-- /.container -->

        <zdy-footer></zdy-footer>
        <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{modalOptions.title}}</h4>
                    </div>
                    <div class="modal-body" v-html="modalOptions.content"></div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <div id="jobModal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">职位信息</h4>
                    </div>
                    <div class="modal-body">
                        <h4>职位名称：{{jobOptions.title}}</h4>
                        <p>公司名称：{{jobOptions.compName}}</p>
                        <span>{{jobOptions.createTime}}</span>
                        <span>{{jobOptions.address}}</span>
                        <span>{{jobOptions.degree}}</span>
                        <span>{{jobOptions.benefits}}</span>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
    <!-- <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> -->
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/bootstarp/js/bootstrap.js"></script>
    <script src="./libs/vue/vue.js"></script>
    <script src="./tpl/publicTpl.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/xhr.js"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <!-- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> -->
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    list: [],
                    navList: [{ text: '首页', value: 'active', path: './index.html' }],
                    modalOptions: {},
                    param: {
                        title: ''
                    },
                    jobList: [],
                    jobs: [],
                    jobOptions: {}
                }
            },
            computed: {
                jobSize() {
                    return Math.ceil(this.jobList.length / 10);
                },
            },
            created() {
                this._selectJobs();
                this._getPolicys();
            },
            methods: {
                handleOnClick: function (item) {
                    this.modalOptions = item;
                    $('#myModal').modal('show')
                },
                _selectJobs: function () {
                    var self = this;
                    xhr.send('/pub/iface/job/selectJobs', this.param, function (res) {
                        self.jobList = res.jobs;
                        self.jobs = res.jobs.slice(0, 10);
                    })
                },
                _getPolicys: function () {
                    var self = this;
                    xhr.send('/pub/iface/job/getPolicys', {}, function (res) {
                        self.list = res.policys;
                    })
                },
                handleOnClickSearch: function () {
                    this._selectJobs();
                },
                handleOnChangeJob: function (num) {
                    var end = this.jobList.slice(num).length > 10 ? 10 : null;
                    this.jobs = !!end ? this.jobList.slice(num, end) : this.jobList.slice(num)
                },
                handleOnClickJob: function (item) {
                    console.log(item)
                    this.jobOptions = item;
                    $('#jobModal').modal('show')
                }
            },
        })
    </script>
</body>

</html>